<template>
	<view class="xflex-y-center">
		<!-- <view class="title">
			约麻
		</view> -->
		<image class="logo" src="/static/image/logos.png" mode=""></image>

		
		<button class="xbutton" v-if="checked" open-type="getPhoneNumber" @getphonenumber="getphone">
			<view class="btn">
				手机号授权登录
			</view>
		</button>
		<button class="xbutton" v-else @click="getphone">
			<view class="btn">
				手机号授权登录
			</view>
		</button>


		<view class="xflex-x accord">
			<view class="flex">
				<image class="accord-img" @click="ischecjk()" :src="`/static/image/gouxuan${!checked?1:2}.png`" mode="">
				</image>
			</view>
			<view class="accord-text">
				我已阅读并同意
				<text @click="topage('/pages/index/agreement?title=用户协议&type=user_protoco')">《用户服务协议》</text>
				和
				<text @click="topage('/pages/index/agreement?title=隐私政策&type=privacy_policy')">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from "vue"
	import {
		wxLogin,
	
	} from '@/network/home.js'
	import {
		topage
	} from '@/utils/common.js'
	import {
		useCounterStore
	} from '@/Store/index'
	const counter = useCounterStore()
	let checked = ref(false)
	let codeData = reactive({
		user_info:'',
		pid:''
	})

	function ischecjk() {
		checked.value = !checked.value
	}
	onLoad((data) => {
		if (data) {
			console.log(data);
			codeData.pid = data.scene        
		}
	})
	
	// 获取手机号
	function getphone(e) {
		if (checked.value) {
			uni.showLoading({
				title: '加载中'
			});
			uni.login({
				success: (res) => {
					console.log(res)
					wxLogin({
						phonecode: e.detail.code,
						code: res.code,
						pid: codeData.pid
					}).then(resv => {
						console.log(resv);
						uni.hideLoading();
						uni.setStorageSync("token", resv.data.token)
						uni.setStorageSync("id", resv.data.id)
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}).catch(()=>{
						uni.hideLoading();
					})


				}
			})
		} else {
			uni.showToast({
				title: '请先勾选用户协议',
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss">
	.title {
		font-size: 40rpx;
		font-weight: 600;
		color: #333333;
		line-height: 56rpx;
		margin-top: 73rpx;
	}

	.logo {
		width: 412rpx;
		height: 412rpx;
		background: #D8D8D8;
		margin-top: 71rpx;
	}

	.btn {
		width: 584rpx;
		height: 84rpx;
		background: #ff3e00;
		border-radius: 42rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
		line-height: 84rpx;
		margin-top: 148rpx;
	}

	.accord {
		margin-top: 400rpx;

		&-img {
			width: 24rpx;
			height: 24rpx;
			margin-right: 12rpx;
		}

		&-text {
			font-size: 24rpx;
			font-weight: 400;
			color: #909090;
			line-height: 33rpx;

			&>text {
				color: #ff3e00;
			}
		}
	}

	.ring {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
		border-radius: 50%;
		box-sizing: border-box;
		border: 1upx solid #909090;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>